<template>
  <div>
    <Plan>
      <template #title>
        666
      </template>

      <template>
        <el-button type="primary" @click="increment"> 点击</el-button>

        <div>
          {{ count }}
          {{ totalCount }}
        </div>

        <el-button type="primary" @click="dec(1)">減少</el-button>

        <el-button type="primary" @click="getUserInfoAction"
          >使用模块化action请求数据</el-button
        >
      </template>
    </Plan>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  methods: {
    increment () {
      this.$store.commit('increment')
      console.log(this.$store.state.count)
    },
    desc () {
      this.$store.dispatch('dec', 1)
    },
    ...mapActions(['dec', 'getGoodsInfo', 'getUserInfoAction']),
    ...mapMutations(['decrement'])
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['totalCount'])
  },
  async created () {
    const res = await this.getGoodsInfo()
    console.log(res)
  }
}
</script>

<style lang="less" scoped></style>
